<script setup lang="ts">
import { chatrooms } from "../../api/chatroom";
import { onMounted, ref } from "vue";
import { log } from "console";
import { ChatRoom  } from "../../ts/wcf";

const checkAll = ref(false);
const isCharRoomIndeterminate = ref(true);
var chatroomRef = ref([] as string[]);
var chatroomList = ref([] as ChatRoom[]);

const handleCheckAllChange = (val: boolean) => {
  chatroomRef.value = val ? chatroomList.value.map(v => v.wxid) as string[] : [];
  isCharRoomIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value: string[]) => {
  // const checkedCount = value.length;
  // checkAll.value = checkedCount === cities.length;
  // isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};

onMounted(() => {
  chatrooms({}).then((data) => {
    chatroomList.value = data;
  });
});
</script>

<template>
  <div>群组信息</div>

  <el-checkbox
    v-model="checkAll"
    :indeterminate="isCharRoomIndeterminate"
    @change="handleCheckAllChange"
  >
    Check all-- ChatRoom
  </el-checkbox>
  <!-- <el-checkbox-group v-model="chatroomRef" @change="handleCheckedCitiesChange"> -->
  <el-checkbox-group v-model="chatroomRef" @change="handleCheckedCitiesChange">
    <el-checkbox
      class="checkbox"
      v-for="chatroom in chatroomList"
      :key="chatroom.wxid"
      :label="chatroom.name"
      :value="chatroom.wxid"
    >
      {{ chatroom.name }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<style scoped>
.checkbox {
  display: block;
}
</style>
